<template>
  <div class="app-container">

    <el-card shadow="always" body-style="padding:'20px'">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品编码" prop="productCore">
        <el-input
          v-model="queryParams.productCore"
          placeholder="请输入商品编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="分类名称" prop="categoryName">
        <el-input
          v-model="queryParams.categoryName"
          placeholder="请输入分类名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>






    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['shopping:goods:addpi']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['shopping:goods:editpi']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['shopping:goods:removepi']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['shopping:goods:exportpi']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--<el-table-column label="商品ID" align="center" prop="productId" />-->
      <el-table-column label="商品编码" align="center" prop="productCore" />
      <el-table-column label="商品名称" align="center" prop="productName" />
      <!--<el-table-column label="国条码" align="center" prop="barCode" />-->
      <el-table-column label="品牌名称" align="center" prop="brandName" />
      <!--<el-table-column label="一级分类ID" align="center" prop="oneCategoryId" />-->
      <!--<el-table-column label="二级分类ID" align="center" prop="twoCategoryId" />-->
      <!--<el-table-column label="三级分类ID" align="center" prop="threeCategoryId" />-->
      <!--<el-table-column label="商品的供应商ID" align="center" prop="supplierId" />-->
      <el-table-column label="商品的分类" align="center" prop="categoryName" />
      <el-table-column label="商品销售价格" align="center" prop="price" />
      <el-table-column label="商品加权平均成本" align="center" prop="averageCost" />
      <!--上下架状态：1下架0上架-->
      <!--<el-table-column label="上下架状态" align="center" prop="publishStatus" />-->
      <el-table-column label="上下架状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.publishStatus"
            active-value="0"
            inactive-value="1"
            @change="publishStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <!--<el-table-column label="审核状态" align="center" prop="auditStatus" />-->
      <!--审核状态：1未审核，0已审核-->
      <el-table-column label="审核状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.auditStatus"
            active-value="0"
            inactive-value="1"
            @change="auditStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <!--<el-table-column label="商品重量" align="center" prop="weight" />-->
      <!--<el-table-column label="商品长度" align="center" prop="length" />-->
      <!--<el-table-column label="商品高度" align="center" prop="height" />-->
      <!--<el-table-column label="商品宽度" align="center" prop="width" />-->
      <!--<el-table-column label="商品颜色" align="center" prop="colorType" />-->
      <el-table-column label="生产日期" align="center" prop="productionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品有效期" align="center" prop="shelfLife" />
      <el-table-column label="商品描述" align="center" prop="descript" />
      <el-table-column label="商品录入时间" align="center" prop="indate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.indate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['shopping:goods:editpi']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['shopping:goods:removepi']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <!--<el-form-item label="商品编码" prop="productCore">-->
          <!--<el-input v-model="form.productCore" placeholder="请输入商品编码" />-->
        <!--</el-form-item>-->
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入商品名称" />
        </el-form-item>
        <!--<el-form-item label="国条码" prop="barCode">-->
          <!--<el-input v-model="form.barCode" placeholder="请输入国条码" />-->
        <!--</el-form-item>-->
        <el-form-item label="品牌表的ID" prop="brandId">
          <el-input v-model="form.brandId" placeholder="请输入品牌表的ID" />
        </el-form-item>
        <!--<el-form-item label="一级分类ID" prop="oneCategoryId">-->
          <!--<el-input v-model="form.oneCategoryId" placeholder="请输入一级分类ID" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="二级分类ID" prop="twoCategoryId">-->
          <!--<el-input v-model="form.twoCategoryId" placeholder="请输入二级分类ID" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="三级分类ID" prop="threeCategoryId">-->
          <!--<el-input v-model="form.threeCategoryId" placeholder="请输入三级分类ID" />-->
        <!--</el-form-item>-->
        <el-form-item label="商品的供应商ID" prop="supplierId">
          <el-input v-model="form.supplierId" placeholder="请输入商品的供应商ID" />
        </el-form-item>
        <el-form-item label="商品的分类ID" prop="categoryId">
          <el-input v-model="form.categoryId" placeholder="请输入商品的分类ID" />
        </el-form-item>
        <el-form-item label="商品销售价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入商品销售价格" />
        </el-form-item>
        <el-form-item label="商品加权平均成本" prop="averageCost">
          <el-input v-model="form.averageCost" placeholder="请输入商品加权平均成本" />
        </el-form-item>
        <!--<el-form-item label="上下架状态：0下架1上架">-->
          <!--<el-radio-group v-model="form.publishStatus">-->
            <!--<el-radio label="1">请选择字典生成</el-radio>-->
          <!--</el-radio-group>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="审核状态：0未审核，1已审核">-->
          <!--<el-radio-group v-model="form.auditStatus">-->
            <!--<el-radio label="1">请选择字典生成</el-radio>-->
          <!--</el-radio-group>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="商品重量" prop="weight">-->
          <!--<el-input v-model="form.weight" placeholder="请输入商品重量" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="商品长度" prop="length">-->
          <!--<el-input v-model="form.length" placeholder="请输入商品长度" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="商品高度" prop="height">-->
          <!--<el-input v-model="form.height" placeholder="请输入商品高度" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="商品宽度" prop="width">-->
          <!--<el-input v-model="form.width" placeholder="请输入商品宽度" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="商品宽度" prop="colorType">-->
          <!--<el-select v-model="form.colorType" placeholder="请选择商品宽度">-->
            <!--<el-option label="请选择字典生成" value="" />-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item label="生产日期" prop="productionDate">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.productionDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择生产日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商品有效期" prop="shelfLife">
          <el-input v-model="form.shelfLife" placeholder="请输入商品有效期" />
        </el-form-item>
        <el-form-item label="商品描述" prop="descript">
          <el-input v-model="form.descript" placeholder="请输入商品描述" />
        </el-form-item>
        <!--<el-form-item label="商品录入时间" prop="indate">-->
          <!--<el-date-picker clearable size="small" style="width: 200px"-->
                          <!--v-model="form.indate"-->
                          <!--type="date"-->
                          <!--value-format="yyyy-MM-dd"-->
                          <!--placeholder="选择商品录入时间">-->
          <!--</el-date-picker>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="最后修改时间" prop="modifiedTime">-->
          <!--<el-date-picker clearable size="small" style="width: 200px"-->
                          <!--v-model="form.modifiedTime"-->
                          <!--type="date"-->
                          <!--value-format="yyyy-MM-dd"-->
                          <!--placeholder="选择最后修改时间">-->
          <!--</el-date-picker>-->
        <!--</el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import { listInfobi, getInfobi, delInfobi, addInfobi, updateInfobi, brandStatusbi } from "@/api/shopping/brandinfo";
  import { listInfopi, getInfopi, delInfopi, addInfopi, updateInfopi, exportInfopi, publishStatusUpdate, auditStatusUpdate } from "@/api/shopping/product";
    export default {
        name: "product",
      data(){
          return{
            dialogVisible: false,
            defaultDictType: "",
            typeOptions: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品信息表格数据
            infoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              productCore: null,
              productName: null,
              barCode: null,
              brandId: null,
              oneCategoryId: null,
              twoCategoryId: null,
              threeCategoryId: null,
              supplierId: null,
              categoryId: null,
              price: null,
              averageCost: null,
              publishStatus: null,
              auditStatus: null,
              weight: null,
              length: null,
              height: null,
              width: null,
              colorType: null,
              productionDate: null,
              shelfLife: null,
              descript: null,
              indate: null,
              modifiedTime: null,
              cornerQuantity: null,
              labelName: null,
              salesQuantity: null
            },
            // 表单参数
            form: {},
          }
      },

      created() {
        const brandId = this.$route.params.brandId || this.$route.params;
        this.getInfobi(brandId);
        this.ListInfobi();

      },
      methods: {

        publishStatusChange(row){
          let text = row.publishStatus === "0" ? "上架" : "下架";
          this.$confirm('确认要"' + text + '"商品吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return publishStatusUpdate(row.productId, row.publishStatus)
          }).then(()=>{
            this.msgSuccess(text + "成功");
          }).catch(function () {
            row.publishStatus = row.publishStatus === "0" ? "1" : "0";
          })
        },


        auditStatusChange(row){
          let text = row.auditStatus === "0" ? "已审核" : "未审核";
          this.$confirm('确认要"' + text + '"吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return auditStatusUpdate(row.productId, row.auditStatus)
          }).then(()=>{
            this.msgSuccess(text + "成功");
          }).catch(function () {
            row.auditStatus = row.auditStatus === "0" ? "1" : "0";
          })
        },

        getInfobi(brandId){
          getInfobi(brandId).then(res=>{
            this.queryParams.brandId = res.data.brandId;
            this.defaultDictType = res.data.brandId;
            this.getList();
          })
        },

        ListInfobi(){
          listInfobi().then(res=>{
            this.typeOptions = res.rows;
          })
        },

        /** 查询商品信息列表 */
        getList() {
          this.loading = true;
          listInfopi(this.queryParams).then(response => {
            this.infoList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            productId: null,
            productCore: null,
            productName: null,
            barCode: null,
            brandId: null,
            oneCategoryId: null,
            twoCategoryId: null,
            threeCategoryId: null,
            supplierId: null,
            categoryId: null,
            price: null,
            averageCost: null,
            publishStatus: 0,
            auditStatus: 0,
            weight: null,
            length: null,
            height: null,
            width: null,
            colorType: null,
            productionDate: null,
            shelfLife: null,
            descript: null,
            indate: null,
            modifiedTime: null,
            cornerQuantity: null,
            labelName: null,
            salesQuantity: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.productId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加商品信息";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const productId = row.productId || this.ids
          getInfopi(productId).then(response => {
            this.form = response.data;
            this.open = true;
            this.title = "修改商品信息";
          });
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.productId != null) {
                updateInfopi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  }
                });
              } else {
                addInfopi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  }
                });
              }
            }
          });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const productIds = row.productId || this.ids;
          this.$confirm('是否确认删除商品信息编号为"' + productIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delInfopi(productIds);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有商品信息数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportInfopi(queryParams);
          }).then(response => {
            this.download(response.msg);
          }).catch(function() {});
        }
      }



    }
</script>

<style scoped>

</style>
